<template>
    <div class="QAItem">
      <div flex="main:justify ">
          <div class="question"><span class="icon-wentiguanli-01 iconfont icon"></span>{{QAItem.questionContent}}</div>
          <div class="time">{{QAItem.questionTime}}</div>
      </div>
      <div>
          <el-image v-for="(image,index) in QAItem.questionImages" :src="image" :key="`question${index}`" class="image" @click.native="bigImage(image)"></el-image>
      </div>

        <div v-if="QAItem.answerContent">
          <overhideText class="answer_warp" :content="QAItem.answerContent"><span class="label">老师回答：</span></overhideText>
      </div>
      <div>
          <el-image v-for="(image,index) in QAItem.answerImages" :src="image" :key="`answer${index}`" class="image"  @click.native="bigImage(image)"></el-image>
      </div>
<!-- :visible.sync="dialogVisible"    -->
      <el-dialog  v-model="dialogVisible">
        <img style="width:100%" :src="dialogImageUrl" alt="">
      </el-dialog>
    </div>
</template>

<script>
import overhideText from "/@/components/overhideText/index.vue"
    export default {
        props:{
            QAItem:Object
        },
        components: {
            overhideText
        },
        data(){
            return {
                dialogVisible:false,
                dialogImageUrl:'',
            }
        },
        methods:{
            bigImage(url){
               console.log(url);
                this.dialogImageUrl = url;
                this.$nextTick(() => {
                    this.dialogVisible = true
                    console.log( this.dialogVisible);
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
.answer_warp{
    margin-top: 20px;
}
.QAItem{
    padding: 20px 30px;
   
    position: relative;
}
.question{
    width: 80%;
      line-height:30px;
      font-size: var(--el-font-size-large);
}
.label{
    display: inline-block;
    color: var(--el-color-primary); //  $--color-primary;
 
    font-size:16px;
    height: 30px;
    text-align: center;
    line-height: 30px;
   
    margin-right:10px;
}
.time{
    font-size:14px;
    color: #9a9a9a;
    line-height:30px;
}
.image{
    margin-top: 20px;
    margin-right:20px;
    width: 100px;
    height: 100px;
    cursor: pointer;
    border-radius:6px;
}
.answer{
    margin-top:10px;
       line-height:30px
}
.icon{
    font-size:24px;
    position:absolute;
    left:0;
    top: 20px;
    color: var(--el-color-primary); //  $--color-primary;
}
</style>